<div class="layout-wrapper">
    <div id="layout-sidebar" [ngClass]="{'active':mobileMenuActive}">
        <a id="menu_input" #inputmenutitle [class.active-menuitem]="inputmenutitle.id == activeMenuId" (click)="activeMenuId = inputmenutitle.id">
            <i class="fa  left  fa-snowflake-o"></i>
            <span>Input</span>
        </a>
        <div [ngClass]="{submenushow: (inputmenutitle.id == activeMenuId), 'submenuhide': (inputmenutitle.id != activeMenuId)}">
            <a [routerLink]="['/checkbox']" (click)="mobileMenuActive = false">&#9679; Checkbox</a>
        </div>
        <a id="data_menutitle" #datamenutitle [class.active-menuitem]="datamenutitle.id == activeMenuId" (click)="activeMenuId = datamenutitle.id">
          <i class="fa  left  fa-snowflake-o"></i>
            <span>Data</span>
        </a>
        <div [ngClass]="{'submenushow': (datamenutitle.id == activeMenuId), 'submenuhide': (datamenutitle.id != activeMenuId)}">
            <a [routerLink]="['/datatable']" (click)="mobileMenuActive = false">&#9679; DataTable</a>
        </div>
    </div>

    <div id="layout-content">
       <top></top>
        <div >
            <router-outlet></router-outlet>
        </div>
       <footer></footer>
    </div>
</div>
